<template>
  <div class="form-preview-quality-rule">
    <div class="form-preview-group quality-rule">
      <label>
        <!-- {{field.displayName}}  -->
        {{title1}}
        <span class="form-preview-notNull" v-if="field.isNull == 0">*</span>
        <i class="iconfont icon-yidongduanxianshi" v-if="field.isAppShow === 1"></i>
      </label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon">
          <i class="iconfont icon-fdn-select"></i>
        </p>
      </div>
    </div>
    <div class="form-preview-group">
      <label>{{label1}}</label>
    </div>
    <div class="form-preview-group">
      <label>{{label2}}</label>
    </div>
    <div class="form-preview-group">
      <label>{{label3}}</label>
    </div>
  </div>
</template>

<script>
import { previewProps } from '@src/component/form/components/props';
import translate from '@src/component/form/mixin/translate.js'
import { transformI18n } from '@src/locales'

export default {
  name: 'form-quality-info-preview',
  mixins: [translate],
  props: previewProps,
  computed:{
    title1(){
      return transformI18n('common.form.preview.qualityInfo.qualityInfo', this.formPreviewLocale)
    },
    label1(){
      return transformI18n('common.form.preview.qualityInfo.qualityStartDate', this.formPreviewLocale)
    },
    label2(){
      return transformI18n('common.form.preview.qualityInfo.qualityEndDate', this.formPreviewLocale)
    },
    label3(){
      return transformI18n('common.form.preview.qualityInfo.qualityStatus', this.formPreviewLocale)
    }
  }
}
</script>
<style lang="scss" scoped>
.quality-rule {
  background: $color-primary-light-1;
  color: $color-primary-light-6;
}
</style>